<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<form method="post" action="URL">

    <!-- 表单中fieldset标签用于定义表单组 -->
    <fieldset>

        <!-- 表单中legend标签用于定义表单组的标题 -->
        <legend>

            <!-- 新增输入类型range的简单应用 -->
            简单应用

        </legend>

        <!-- 表单中label标签用于定义表单控件的说明 -->
        <label>音量大小：

            <!-- 输入类型为range的滑动条 -->
            <input type="range" name="range" id="range" min="0" max="100" step="2" value="10" onchange="change()"/>

        </label><span id="volume">10</span>

    </fieldset>

</form>
<div>
    其中range的数值范围是0-100，步长为2，默认值为10。

    range变化时，span中对应当前数值,当数值超过80时，

    弹窗提示用户“音量过大”，并延时2s后自动将range值改为50。
</div>


<script>

    // 当用户拖动滑动条时触发onchange事件调用此函数
    function change() {

        // 获取滑动条对象
        var range = document.getElementById("range");

        // 获取span对象
        var text = document.getElementById("volume");

        // 将滑动条的value值赋值给span对象
        text.innerHTML = range.value;

        // 获取滑动条的value值
        var ext = parseFloat(range.value);

        // 如果滑动条的值大于80
        if (ext.innerHTML > 80) {

            // 弹出框，提示音量过大，请调整
            let val = prompt("音量过大,请调整:");

            // 设置延时2秒
            setTimeout(function () {

                // 将提示的值赋值给滑动条
                range.value = val;

                // 将提示的值赋值给span对象
                text.innerHTML = val;

            }, 2000);

        }

    }
</script>
</script>
</body>
</html>